html {

    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    

    background-size: cover;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    
    height: 100%;
    }



    
    h1 {
    font-family: Georgia, Times, "Times New Roman", serif;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    text-align: center;
    }
    
    h2 {
    text-align: center;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    }
    


    header{
        font-size: 1.2em;
       margin-left: 35%;
        text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;



    }


    .containall{
        margin-top: 3em;
        margin-left: 38%;
        margin-right: 25%;
    }

    #Rock {
    color: transparent; 
    border: 0;
    background-image: url();
    height: 128px;
    width: 128px;
    background-color: transparent;
    }
    
    #Paper {
    color: transparent;
    border: 0;
    background-image: url();
    height: 150px;
    width: 150px;
    background-color: transparent;
    }
    
    #Scissors {
    color: transparent;
    border: 0;
    background-image: url();
    height: 150px;
    width: 150px;
    background-color: transparent;
    }
    
  
    
    h3 {
    text-align: center; 
    }
    
    .button-box {
    text-align:center; 
    width: 13em;
    border:2px solid rgb(0, 0, 0);
    
    line-height: 10px;
    position: relative;
    top: -125px;
    left: -75px;



      
    }
    
 
    #Rock{
        
        margin-left: 30px;
        margin-top: 5px;
    
    }
    
    #Paper{

        margin-left: 30px;
        margin-top: 5px;
    
    }
    
    #Scissors{

        margin-left: 30px;
        margin-top: 5px;

       max-height: 3px;
    }


    .player-bar{
        position: absolute;
  
        z-index: 2;
        margin-top: -4.8em;
        margin-left: -6em;
        border: 5px solid rgb(3, 214, 56);
        border-radius: 40px 40px 40px 40px;
        width:6.25em;
        height: 1.2em;
        
        background: rgb(38,38,38);
        background: linear-gradient(115deg, rgba(38,38,38,0.8690826672465861) 0%, rgba(0,0,0,0.7066176812521884) 100%);
        
   
    }


    .computer-bar{
        position: absolute;
  
        z-index: 2;
        margin-top: -4.8em;
        margin-left:5.5em;
        border: 5px solid rgb(199, 30, 0);
        border-radius: 40px 40px 40px 40px;
        width:6.25em;
        height: 1.2em;
        
        background: rgb(38,38,38);
        background: linear-gradient(115deg, rgba(38,38,38,0.8690826672465861) 0%, rgba(0,0,0,0.7066176812521884) 100%);
        
   
    }


    .player-bar-txt{
                
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        letter-spacing: 3px;
        color: #ccecd3;
        text-align: center;
        font-weight: 400;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
        


        position: absolute;
        top: -1.5em;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;


    }

    
    .computer-bar-txt{
                
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1em;
        letter-spacing: 3px;
        color: #ccecd3;
        text-align: center;
        font-weight: 400;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: none;
        


        position: absolute;
        top: -1.5em;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;


    }





    .Image-Box {
        position: relative;
        top : -4em;
        right: 6.75em;
     
        border-bottom-width: 4px;
        border-block-end-width:   2px;
        width: 375px;
        display:grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 3em;

    }


    .Image-Box img{
         border-radius: 22em;


        -webkit-box-shadow: 6px 9px 8px -1px rgba(59,59,32,1);
        -moz-box-shadow: 6px 9px 8px -1px rgba(59,59,32,1);
        box-shadow: 6px 9px 8px -1px rgba(59,59,32,1);

        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        letter-spacing: 5.8px;
        word-spacing: 2px;
        color: #000000;
        font-weight: normal;
        text-decoration: none;
        font-style: normal;
        font-variant: normal;
        text-transform: none;

    }



    .playimg{
        background: rgb(65,66,66);
        background: linear-gradient(0deg, rgba(65,66,66,1) 0%, rgb(66, 113, 240) 100%);
        border: 6px groove rgba(0, 247, 21, 0.993);
        



    }

    .playimg::before{
        content: "You";
        text-align: center;
        padding-left: 50px;
        ;
        color:white;
        text-shadow: 3px -1px 3px rgba(0,0,0,0.6);

        
    }
    .compimg{
        background: rgb(65,66,66);
        background: linear-gradient(0deg, rgba(65,66,66,1) 0%, rgb(224, 16, 16) 100%);


        border: 6px groove rgba(243, 8, 8, 0.918)
    }

    .compimg::before{
        content: "Comp";
        text-align: center;
        padding-left: 50px;
        color:white;
        text-shadow: 3px -1px 3px rgba(0,0,0,0.6);

        
    }

   


.Score_Counter{ 
    position: relative;
    top : -2em;
    left: -6.84em;
    border:5px solid rgb(40, 46, 54);
    border-bottom-width: 4px;
    border-block-end-width:   2px;
    width: 18.9em;
    height:22.6em;
    border-radius: 3em;

    background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);

    -webkit-box-shadow: -26px -11px 52px -25px rgba(40,68,82,1);
    -moz-box-shadow: -26px -11px 52px -25px rgba(40,68,82,1);
    box-shadow: -26px -11px 52px -25px rgba(40,68,82,1);

  }


  .score_count-wrap{
      display: grid;
      grid-template-columns: 13em 2em;
      padding-top: 0em;
      

     
      
  }
  
  .score-utxt{
      background:rgb(1, 194, 1);
      
     
  }

  .score-ctxt{
      background-color: rgb(255, 61, 61);
  }


  .Image-Box p{
      text-align: center;
  }


  h5{
   font-size: 1em;
   text-align: center;

  }